<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="zh-Hant-TW" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh-Hant-TW" > <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <meta name="author" content="XenForo Ltd.">
  
  <link rel="shortcut icon" href="../img/favicon.ico">
  <title>模板語法 - XenForo 2.0 開發人員說明文件</title>
	<link rel="stylesheet" href="../css/theme.css" type="text/css" />
	<link rel="stylesheet" href="../css/theme_extra.css" type="text/css" />
		<link href="../extra.css?d=2020-11-03%2013%3A04%3A57.281547%2B00%3A00" rel="stylesheet">

  
  <script>
    // Current page data
    var mkdocs_page_name = "\u6a21\u677f\u8a9e\u6cd5";
    var mkdocs_page_input_path = "template-syntax.md";
    var mkdocs_page_url = null;
  </script>
  

  
  

  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <script src="../js/modernizr-2.8.3.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script> 
  
</head>

<body class="wy-body-for-nav" role="document">

  <div class="wy-grid-for-nav">

    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side stickynav">
    <div class="wy-side-scroll">
      <div class="wy-side-nav-search">
        

        <div class="dropdown">
          <div class="lang_btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="icon fa-globe"></i>
          </div>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" id="en" href="javascript:;">English</a>
            <a class="dropdown-item" id="zh_tw" href="javascript:;">繁體中文</a>
            <a class="dropdown-item" id="zh_cn" href="javascript:;">简体中文</a>
          </div>
        </div>
        <a href=".." class="icon icon-home"> XenForo 2.0<br>開發人員說明文件</a>
        <div role="search">
  <form id ="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="搜尋文件" title="Type search term here" />
  </form>
</div>
        

      </div>

      <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
        <ul class="current">
                    <li class="toctree-l1"><a class="" href="..">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">入門須知</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1 current"><a class="current" href="./">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">模板語法</font>
    </font>
</a>

    <ul class="subnav">
    <li class="toctree-l2">
        <a href="#_2">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">最佳示例</font>
            </font>
        </a>
    </li>
    <li class="toctree-l2">
        <a href="#_3">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">有幫助的訊息</font>
            </font>
        </a>
    </li>
    <ul>
        <li>
            <a class="toctree-l3" href="#_4">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">對模板進行註釋</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#_5">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">在模板中加入另一個模板</font>
                </font>
            </a>
        </li>
    </ul>
    <li class="toctree-l2">
        <a href="#_6">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">模板巨集</font>
            </font>
        </a>
    </li>
    <ul>
        <li>
            <a class="toctree-l3" href="#_7">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">定義巨集</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#_9">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">加入和使用巨集</font>
                </font>
            </a>
        </li>
    </ul>
    <li class="toctree-l2">
        <a href="#_11">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">模板控制結構</font>
            </font>
        </a>
    </li>
    <ul>
        <li>
            <a class="toctree-l3" href="#if">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">If 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#elseelse-if">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Else/Else-If 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#for-each">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">For-each 標籤</font>
                </font>
            </a>
        </li>
    </ul>
    <li class="toctree-l2">
        <a href="#_14">
            <font style="vertical-align: inherit;">
                <font style="vertical-align: inherit;">模板標籤</font>
            </font>
        </a>
    </li>
    <ul>
        <li>
            <a class="toctree-l3" href="#_15">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">頭像標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#_17">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">頁面路徑導覽列標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#_19">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">按鈕標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#callback">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Callback 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#css">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">CSS 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#js">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">JS 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#set">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Set 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#likes">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Likes 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#sidebar">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Sidebar 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#sidenav">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">SideNav 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#title">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Title 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#widget">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Widget 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#useractivity">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">UserActivity 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#userbanners">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">UserBanners 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#userblurb-tag">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">UserBlurb tag</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#username">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Username 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#usertitle">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">UserTitle 標籤</font>
                </font>
            </a>
        </li>
        <li>
            <a class="toctree-l3" href="#sectioned">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">Sectioned 標籤</font>
                </font>
            </a>
        </li>
    </ul>
    </ul>

                    </li>
                    <li class="toctree-l1"><a class="" href="../rest-api/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">REST API</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../add-on-structure/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">附加元件架構</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../development-tools/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">開發工具</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../general-concepts/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">通用概念</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../routing-basics/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">路由基礎知識</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../controller-basics/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">控制器基礎知識</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../entities-finders-repositories/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">資料實體、查找器、儲存庫</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../criteria/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">準則</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../managing-the-schema/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">管理 Schema</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../lets-build-an-add-on/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">創建一個附加組件</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../designing-styles/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">設計樣式</font>
    </font>
</a>

                    </li>
                    <li class="toctree-l1"><a class="" href="../scotchbox/">
    <font style="vertical-align: inherit;">
        <font style="vertical-align: inherit;">附錄：Scotch Box</font>
    </font>
</a>

                    </li>
        </ul>
      </div>
    </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
        <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
        <a href="..">XenForo 2.0<br>開發人員說明文件</a>
      </nav>

      
      <div class="wy-nav-content">
        <div class="rst-content">
          <div role="navigation" aria-label="breadcrumbs navigation">
  <ul class="wy-breadcrumbs">
    <li><a href="..">首頁</a> &raquo;</li>
    
      
    
    <li>模板語法</li>
    <li class="wy-breadcrumbs-aside">
      
        <a href="https://github.com/EverSoar/xenforo2doc/edit/master/docs/template-syntax.md"
          class="icon icon-github"> 在 GitHub 上編輯</a>
      
    </li>
  </ul>
  
  <hr/>
</div>
          <div role="main">
            <div class="section">
              
	<h1 id="_1">模板語法<a class="headerlink" href="#_1" title="Permanent link">&para;</a></h1>
<p>XenForo 2 模板語法對於開發人員和論壇管理員都是強大的工具，使您可以完全控制 XenForo 頁面的排版。</p>
<h2 id="_2">最佳示例<a class="headerlink" href="#_2" title="Permanent link">&para;</a></h2>
<ul>
<li>按照慣例，XenForo 的標籤是 <code>lowercase</code>。</li>
<li>所有 XenForo 標籤都以 <code>xf:</code> 命名空間為前綴。</li>
</ul>
<h2 id="_3">有幫助的訊息<a class="headerlink" href="#_3" title="Permanent link">&para;</a></h2>
<h3 id="_4">對模板進行註釋<a class="headerlink" href="#_4" title="Permanent link">&para;</a></h3>
<p>如果您想註釋掉一些您不想在最終頁面原始碼中看到的模板代碼（或者勵志的訊息），則可以使用 <code>xf:comment</code> 標籤。</p>
<pre><code class="language-html">&lt;xf:comment&gt;
如果你不再以你喜歡什麼和不喜歡什麼來看待這個世界，
而是看到了事物本身的真實面目，
你就會發現你的生活將會更加地祥和。
&lt;/xf:comment&gt;
</code></pre>
<h3 id="_5">在模板中加入另一個模板<a class="headerlink" href="#_5" title="Permanent link">&para;</a></h3>
<p><code>xf:include</code> 標籤允許你在當前模板中加入一個不同的模板。</p>
<pre><code class="language-html">&lt;xf:include template=&quot;my_template&quot; /&gt;
</code></pre>
<p>只需將 <code>template</code> 屬性設定為你想加入的模板名稱即可。</p>
<h2 id="_6">模板巨集<a class="headerlink" href="#_6" title="Permanent link">&para;</a></h2>
<p>模板巨集是 XenForo 模板語法的一個非常強大的部分。</p>
<p>通常，你應該在程式設計語言中使用函數或子程式的任何地方使用巨集。 對於非程式設計師來說，我把這一點總結為：<strong>要麼在</strong>任何您想在多個不同檔案中多次產生相同事物的地方使用巨集，<strong>或者</strong>在不同情況下產生不同的東西（如果你查看定義巨集的指南，這可能會更有幫助）。</p>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>出於可讀性原因，您不應該使用巨集標籤作為變數。 您應該使用 Set 標籤，並像對待任何模板變量一樣對待變量。</p>
</div>
<h3 id="_7">定義巨集<a class="headerlink" href="#_7" title="Permanent link">&para;</a></h3>
<pre><code class="language-html">&lt;xf:macro
    name=&quot;my_macro_name&quot;&gt;

    &lt;!-- 你的巨集內容 --&gt;

&lt;/xf:macro&gt;
</code></pre>
<p>最簡單的，可以用 <code>name</code> 屬性定義一個巨集，並在巨集標籤中重複你想要的內容。</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>當您在多個檔案中使用巨集時，最佳做法是將巨集放入自己的模板中。</p>
</div>
<h4 id="_8">巨集參數<a class="headerlink" href="#_8" title="Permanent link">&para;</a></h4>
<pre><code class="language-html">&lt;xf:macro
    name=&quot;my_macro_name&quot;
    arg-message=&quot;我超厲害的巨集訊息！&quot;&gt;

    &lt;h1&gt;訊息&lt;/h1&gt;
    &lt;p&gt;{$message}&lt;/p&gt;

&lt;/xf:macro&gt;
</code></pre>
<p>在此示例中，為巨集定義了 <code>arg-message</code> (<code>我驚人的巨集訊息！</code>) 的預設值。 如果使用 message 參數呼叫巨集，則該值將被覆蓋。</p>
<p>有時需要將一個參數標記為必填項。 這可以通過在巨集定義中把參數值設定為 <code>!</code> 來實現。</p>
<h3 id="_9">加入和使用巨集<a class="headerlink" href="#_9" title="Permanent link">&para;</a></h3>
<pre><code class="language-html">&lt;xf:macro template=&quot;my_macro_template&quot; name=&quot;my_macro_name&quot; /&gt;
</code></pre>
<p>最簡單的方法是，通過設置 <code>name</code> 屬性並將標籤保留為空來加入巨集。</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>使用巨集標籤時，你應該使用標籤的自動關閉形式，以便讓別人更容易區分巨集的定義和用法的區別。</p>
</div>
<h4 id="_10">巨集參數<a class="headerlink" href="#_10" title="Permanent link">&para;</a></h4>
<p>您還可以為巨集提供參數：</p>
<pre><code class="language-html">&lt;xf:macro template=&quot;my_macro_template&quot; name=&quot;my_macro_name&quot; arg-argName=&quot;argValue&quot; /&gt;
</code></pre>
<p>其中 <code>argName</code> 是巨集參數的名稱。</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>您應該使用 <code>lowerCamelCase</code> 來命名你的巨集參數。</p>
</div>
<h2 id="_11">模板控制結構<a class="headerlink" href="#_11" title="Permanent link">&para;</a></h2>
<p>XenForo 2 模板語法支援某些控制元件結構，以使某些任務更易於實現。</p>
<h3 id="if">If 標籤<a class="headerlink" href="#if" title="Permanent link">&para;</a></h3>
<p>if 模板標籤可用於有條件地顯示一些 HTML 或模板的一部分。</p>
<pre><code class="language-html">&lt;!-- Shows content only if a user is signed in... --&gt;
&lt;xf:if is=&quot;$xf.visitor.user_id&quot;&gt;
    &lt;!-- 做點什麼... --&gt;
&lt;/xf:if&gt;
</code></pre>
<p>if 標籤具有以下屬性：</p>
<ul>
<li><code>is</code> - 滿足條件時應顯示標籤內容的條件。</li>
</ul>
<h4 id="_12">條件<a class="headerlink" href="#_12" title="Permanent link">&para;</a></h4>
<p>該 <code>is</code> 屬性支援一些邏輯運算符：</p>
<ul>
<li><code>OR</code> - 用於連接替代條件。（二擇一： <code>||</code>）</li>
<li><code>AND</code> - 用於連接其他條件。 (二擇一: <code>&amp;&amp;</code>）</li>
<li><code>!</code> - 放在條件前，使其反轉。（稱為："否"）</li>
<li><code>XOR</code> - 如果兩個條件中只有一個為 true，則返回 true。（稱為："異或"）</li>
</ul>
<h3 id="elseelse-if">Else/Else-If 標籤<a class="headerlink" href="#elseelse-if" title="Permanent link">&para;</a></h3>
<p>else 和 else-if 標籤與 if 標籤結合使用，以按名稱建議的方式有條件地顯示 HTML。</p>
<p><strong>else 用法示例：</strong></p>
<pre><code class="language-html">&lt;xf:if is=&quot;$xf.visitor.is_admin&quot;&gt;
    &lt;!-- 這裡的內容只有管理員才會看到... --&gt;
&lt;xf:else /&gt;
    &lt;!-- 這裡的內容將被顯示給任何非管理員的人看到！ --&gt;
&lt;/xf:if&gt;
</code></pre>
<p><strong>else-if 的用法示例：</strong></p>
<pre><code class="language-html">&lt;xf:if is=&quot;$xf.visitor.is_admin&quot;&gt;
    &lt;!-- 這裡的內容只有管理員才會看到... --&gt;
&lt;xf:elseif is=&quot;$xf.visitor.is_moderator&quot; /&gt;
    &lt;!-- 這裡的內容只會顯示給版主(不包括兼任管理員的用戶)。 --&gt;
&lt;xf:else /&gt;
    &lt;!-- 這裡的內容將顯示給非管理員或版主的任何人。 --&gt;
&lt;/xf:if&gt;
</code></pre>
<p>正如你所看到的，一旦一個條件被滿足，其餘的 if 語句將被忽略。（所以，在這種情況下，如果使用者是管理員，上面的 <code>xf:if</code> 部分被執行，其餘的 if 語句則被忽略。)</p>
<h3 id="for-each">For-each 標籤<a class="headerlink" href="#for-each" title="Permanent link">&para;</a></h3>
<p>for-each 標籤使您可以遍歷項目陣列，為每個項目印出 HTML 區塊。</p>
<pre><code class="language-html">&lt;xf:set var=&quot;$names&quot; value=&quot;{{ ['派翠克', '特麗莎', '金博爾', '韋恩', '格雷斯'] }}&quot; /&gt;

&lt;xf:foreach loop=&quot;$names&quot; key=&quot;$key&quot; value=&quot;$name&quot; i=&quot;$i&quot;&gt;
    &lt;p&gt;你好， {$name}。 這是名字 {$i} 。 該元素的陣列 key 值為： {$key}&lt;/p&gt;
&lt;/xf:foreach&gt;
</code></pre>
<p>for-each 標籤具有以下屬性：</p>
<ul>
<li><code>loop</code> - 要循環的陣列。</li>
<li><code>key</code> - 在循環中使用的變數名稱，以獲取當前元素的陣列 key。 可以是整數（普通陣列）或字串（關聯陣列）。</li>
<li><code>value</code> - 在循環中使用的變數名稱，包含當前陣列項。</li>
<li><code>i</code> -  在循環中用於當前索引的變數名稱。</li>
</ul>
<h4 id="_13">輸出示例<a class="headerlink" href="#_13" title="Permanent link">&para;</a></h4>
<blockquote>
<p>你好，派翠克。 這是名字 1。</p>
<p>你好，特麗莎。 這是名字 2。</p>
<p>你好，金博爾。 這是名字 3。</p>
<p>你好，韋恩。 這是名字 4。</p>
<p>你好，格雷斯。 這是名字 5。</p>
</blockquote>
<h2 id="_14">模板標籤<a class="headerlink" href="#_14" title="Permanent link">&para;</a></h2>
<h3 id="_15">頭像標籤<a class="headerlink" href="#_15" title="Permanent link">&para;</a></h3>
<p>在頁面中插入用戶的頭像。</p>
<pre><code class="language-html">&lt;xf:avatar user=&quot;{$xf.visitor}&quot; size=&quot;o&quot; canonical=&quot;true&quot; /&gt;
</code></pre>
<p>頭像標籤具有以下屬性：</p>
<ul>
<li><code>user</code> - 要產生頭像的 XenForo 用戶物件。</li>
<li><code>size</code> - 要產生的圖片大小。(參見圖片尺寸)</li>
<li><code>canonical</code> - 是否使用有利於 SEO 的完整 URL。該值只對 <code>custom</code> 頭像有效。</li>
<li><code>notooltip</code> - 當滑鼠懸停在頭像上時顯示的工具提示是否應該被關閉。</li>
<li><code>forcetype</code> - 可以用來強制取得 <code>gravatar</code> 或 <code>custom</code> 頭像，設定值為其中之一。</li>
<li><code>defaultname</code> - 如果 <code>user</code> 屬性包含一個無效的使用者時，預設要使用的使用者名稱。</li>
</ul>
<h4 id="_16">圖片大小<a class="headerlink" href="#_16" title="Permanent link">&para;</a></h4>
<p>如果提供的頭像大小無效，則代碼將回退到大小 '<code>s</code>'。</p>
<ul>
<li><code>o</code> - <code>384px</code></li>
<li><code>h</code> - <code>384px</code></li>
<li><code>l</code> - <code>192px</code></li>
<li><code>m</code> - <code>96px</code></li>
<li><code>s</code> - <code>48px</code></li>
</ul>
<h3 id="_17">頁面路徑導覽列標籤<a class="headerlink" href="#_17" title="Permanent link">&para;</a></h3>
<p>修改頁面路徑導覽列。</p>
<pre><code class="language-html">&lt;xf:breadcrumb href=&quot;{{ link('my_page') }}&quot;&gt;{{ phrase('my_page_name') }}&lt;/xf:breadcrumb&gt;
</code></pre>
<p>頁面路徑導覽列標籤具有以下屬性：</p>
<ul>
<li><code>href</code> - 為頁面路徑導覽列中的最後一個元素設定的連結。</li>
</ul>
<p>標籤的值可用於設置頁面路徑導覽列中最後一個元素的名稱。</p>
<h4 id="_18">其他用法<a class="headerlink" href="#_18" title="Permanent link">&para;</a></h4>
<pre><code class="language-html">&lt;xf:breadcrumb source=&quot;$category.getBreadcrumbs(false)&quot; /&gt;
</code></pre>
<p>您還可以通過 <code>source</code> 在頁面路徑導覽列標籤的屬性中呼叫函數來以程式設計方式定義自己的頁面路徑導覽列。</p>
<p>該 <code>source</code> 參數基本上採用一個具有 <code>href</code> 和 <code>value</code> 屬性的物件陣列（多維陣列），其中每個物件都是一個頁面路徑導覽列元素。</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>如果要更改根目錄頁面路徑導覽列，可以在 "基本信息面板" 選項部分中更改 "Root breadcrumb" 選項。</p>
</div>
<h3 id="_19">按鈕標籤<a class="headerlink" href="#_19" title="Permanent link">&para;</a></h3>
<p>添加具有適當類的按鈕元素以及（可選）圖示。</p>
<pre><code class="language-html">&lt;xf:button icon=&quot;save&quot;&gt;&lt;/xf:button&gt;
</code></pre>
<p>button 標籤具有以下屬性：</p>
<ul>
<li><code>icon</code> - 應用於按鈕的圖示類。(參見按鈕圖示)</li>
</ul>
<h4 id="_20">按鈕圖示<a class="headerlink" href="#_20" title="Permanent link">&para;</a></h4>
<p>默認情況下，XenForo 按鈕支援以下圖示（使用CSS創建）：</p>
<ul>
<li><code>add</code></li>
<li><code>confirm</code></li>
<li><code>write</code></li>
<li><code>import</code></li>
<li><code>export</code></li>
<li><code>download</code></li>
<li><code>disable</code></li>
<li><code>edit</code></li>
<li><code>save</code></li>
<li><code>reply</code></li>
<li><code>quote</code></li>
<li><code>purchase</code></li>
<li><code>payment</code></li>
<li><code>convert</code></li>
<li><code>search</code></li>
<li><code>sort</code></li>
<li><code>upload</code></li>
<li><code>attach</code></li>
<li><code>login</code></li>
<li><code>rate</code></li>
<li><code>config</code></li>
<li><code>refresh</code></li>
<li><code>translate</code></li>
<li><code>vote</code></li>
<li><code>result</code></li>
<li><code>history</code></li>
<li><code>cancel</code></li>
<li><code>preview</code></li>
<li><code>conversation</code></li>
<li><code>bolt</code></li>
<li><code>list</code></li>
<li><code>prev</code></li>
<li><code>next</code></li>
<li><code>markRead</code></li>
<li><code>notificationsOn</code></li>
<li><code>notificationsOff</code></li>
<li><code>merge</code></li>
<li><code>move</code></li>
<li><code>copy</code></li>
<li><code>approve</code></li>
<li><code>unapprove</code></li>
<li><code>delete</code></li>
<li><code>undelete</code></li>
<li><code>stick</code></li>
<li><code>unstick</code></li>
<li><code>lock</code></li>
<li><code>unlock</code></li>
</ul>
<h3 id="callback">Callback 標籤<a class="headerlink" href="#callback" title="Permanent link">&para;</a></h3>
<p>執行一個 PHP Callback 方法。</p>
<pre><code class="language-html">&lt;xf:callback class=&quot;Vendor\Addon\Class&quot; method=&quot;getX&quot; params=&quot;['abc']&quot;&gt;&lt;/xf:callback&gt;
</code></pre>
<p>此 callback 標籤具有以下屬性：</p>
<ul>
<li><code>class</code> - 該 class（從 root 命名空間）包含要執行的方法。</li>
<li><code>method</code> - 要執行的方法。 (參見 callback 方法)</li>
<li><code>params</code> - 提供給此方法的參數陣列。</li>
</ul>
<h4 id="callback_1">Callback 方法<a class="headerlink" href="#callback_1" title="Permanent link">&para;</a></h4>
<p>為了使一個方法被認為是 callback 方法，必須對其進行適當的命名，否則它將拋出錯誤 '<code>callback_method_x_does_not_appear_to_indicate_read_only</code>'。為了使它被認為是唯讀的，方法名稱必須以下列前綴之一開頭：</p>
<ul>
<li><code>are</code></li>
<li><code>can</code></li>
<li><code>count</code></li>
<li><code>data</code></li>
<li><code>display</code></li>
<li><code>does</code></li>
<li><code>exists</code></li>
<li><code>fetch</code></li>
<li><code>filter</code></li>
<li><code>find</code></li>
<li><code>get</code></li>
<li><code>has</code></li>
<li><code>is</code></li>
<li><code>pluck</code></li>
<li><code>print</code></li>
<li><code>render</code></li>
<li><code>return</code></li>
<li><code>show</code></li>
<li><code>total</code></li>
<li><code>validate</code></li>
<li><code>verify</code></li>
<li><code>view</code></li>
</ul>
<h3 id="css">CSS 標籤<a class="headerlink" href="#css" title="Permanent link">&para;</a></h3>
<p>加入一個外部 CSS 或 LESS 模板檔案。</p>
<pre><code class="language-html">&lt;xf:css src=&quot;mycss_file.css&quot;  /&gt;
</code></pre>
<p>CSS 標籤具有以下屬性：</p>
<ul>
<li><code>src</code> - 要加入的 CSS 或 LESS 模板檔案。</li>
</ul>
<h4 id="_21">其他用法<a class="headerlink" href="#_21" title="Permanent link">&para;</a></h4>
<pre><code class="language-html">&lt;xf:css&gt;
html, body {
 font-family: &quot;Roboto&quot;, sans-serif;
}
&lt;/xf:css&gt;
</code></pre>
<p>如果 CSS 標籤不為空，則標籤中的所有內容都將轉換為嵌入式 CSS。</p>
<h4 id="_22">進一步說明<a class="headerlink" href="#_22" title="Permanent link">&para;</a></h4>
<p>對於[CSS]，不用再將它們稱為檔案了。將它們複製並貼上到新模板中，並按如下所示進行調用：<br>
來源自：<a href="https://xenforo.com/community/threads/including-external-library-js-and-css.136153/post-1185631"><strong>克里斯·D，XenForo 開發人員</strong></a></p>
<pre><code class="language-html">&lt;xf:css src=&quot;questionthreads_fonticonpicker.css&quot; /&gt;
&lt;xf:css src=&quot;questionthreads_fonticonpicker_grey.css&quot; /&gt;
</code></pre>
<h3 id="js">JS 標籤<a class="headerlink" href="#js" title="Permanent link">&para;</a></h3>
<p>加入一個JavaScript檔案。</p>
<pre><code class="language-html">&lt;xf:js src=&quot;myaddon/vendor/scripts/myjs_file.js&quot;  /&gt;
</code></pre>
<p>JS 標籤具有以下屬性：</p>
<ul>
<li><code>src</code> - 要加入到模板中的 JS 檔案。</li>
<li><code>prod</code> - 要加入到模板中的 JS 檔案，只適用於生產模式。</li>
<li><code>dev</code> - 要加入到模板中的 JS 檔案，只適用於開發模式。</li>
<li><code>min</code> - 是否要加入最小化版本的檔案。(用 <code>.min.js</code> 取代 <code>.js</code>)   -   只需要在生產模式下關心。</li>
<li><code>addon</code> - 是否要使用開發中 JS 的 URL。  -   只需要在開發模式下關心。</li>
</ul>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>The <code>src</code> tag cannot be used in conjunction with either the <code>prod</code> or <code>dev</code> tags.</p>
</div>
<h4 id="_23">其他用法<a class="headerlink" href="#_23" title="Permanent link">&para;</a></h4>
<pre><code class="language-html">&lt;xf:js&gt;
alert(&quot;真相很傷人，我知道。其實這是基於生物學上的。&quot;);
&lt;/xf:js&gt;
</code></pre>
<p>如果 JS 標籤不為空，則標籤中的所有內容都會轉換為嵌入式 JS。</p>
<h4 id="_24">進一步說明<a class="headerlink" href="#_24" title="Permanent link">&para;</a></h4>
<p>JavaScript 檔案是相對於 <code>/js</code> 目錄提供的。儘管不建議這樣做，但您也可以在此標籤中加入外部資源。</p>
<p>這個標籤在 <code>editor</code> 模板中就是一個很好的例子。</p>
<h3 id="set">Set 標籤<a class="headerlink" href="#set" title="Permanent link">&para;</a></h3>
<p>set 標籤允許您建立一個對另一個變數的參考或建立一個新的變數。你應該在程式語言中使用變數的任何地方使用 set 標籤。</p>
<pre><code class="language-html">&lt;xf:set var=&quot;$visitor&quot; value=&quot;{$xf.visitor}&quot; /&gt;
</code></pre>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>不要對要在多個模板中使用的一組元素使用 Set 標籤，而應使用 Macro 標籤。</p>
</div>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>變數名稱（<code>var</code> 屬性）必須以 <code>$</code> 開頭。</p>
</div>
<p>set 標籤具有以下屬性：:</p>
<ul>
<li><code>var</code> - 您想定義變數的名稱（本質上是別名）。</li>
<li><code>value</code> - 要參考的變數或變數值。</li>
</ul>
<h4 id="_25">其他用法<a class="headerlink" href="#_25" title="Permanent link">&para;</a></h4>
<pre><code class="language-html">&lt;xf:set var=&quot;$myVariableName&quot;&gt;
我的變數值!
這可以是一個 callback，或者只是一組短語。
&lt;/xf:set&gt;
</code></pre>
<p>如果 <code>value</code> 未提供屬性且標籤不為空，則變數值將設置為標籤的內容。</p>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>當您以這種形式使用 Set 標籤時，該值將被轉義，並且結果值將是一個字符串。該 <code>value</code> 屬性雖然不支援 HTML 或類似 HTML 的標籤，但沒有此限制。</p>
</div>
<h3 id="likes">Likes 標籤<a class="headerlink" href="#likes" title="Permanent link">&para;</a></h3>
<p>顯示帖子的喜歡次數以及一些喜歡該帖子的用戶。</p>
<pre><code class="language-html">&lt;xf:likes content=&quot;{$post}&quot; url=&quot;&quot; /&gt;
</code></pre>
<p>likes 標籤具有以下屬性：</p>
<ul>
<li><code>content</code> - 要顯示 '喜歡' 文本的 <code>XF\Entity\Post</code> 或 <code>XF\Entity\ProfilePost</code> 資料實體。</li>
<li><code>url</code> - 點擊 '喜歡' 文本時顯示的 URL。</li>
</ul>
<h4 id="_26">格式<a class="headerlink" href="#_26" title="Permanent link">&para;</a></h4>
<blockquote>
<p>你, 里斯本, kcho 和 2 其他人</p>
</blockquote>
<p>格式為 [👍 <code>abc</code> 和 2 其他人]（其中 👍 "大拇指" 表情符代表 "點讚" 圖示，<code>abc</code> 代表最後三個點讚該帖子的使用者名字。）</p>
<h3 id="sidebar">Sidebar 標籤<a class="headerlink" href="#sidebar" title="Permanent link">&para;</a></h3>
<p>參見 <a href="#sectioned">Sectioned 標籤</a>.</p>
<h3 id="sidenav">SideNav 標籤<a class="headerlink" href="#sidenav" title="Permanent link">&para;</a></h3>
<p>參見 <a href="#sectioned">Sectioned 標籤</a>.</p>
<h3 id="title">Title 標籤<a class="headerlink" href="#title" title="Permanent link">&para;</a></h3>
<p>設定頁面的標題，包括頁面上的 <code>h1</code> 標籤和瀏覽器標籤。</p>
<pre><code class="language-html">&lt;xf:title&gt;{{ phrase('my_page_title') }}&lt;/xf:title&gt;
</code></pre>
<h4 id="_27">進一步說明<a class="headerlink" href="#_27" title="Permanent link">&para;</a></h4>
<p>雖然可以對 Title 進行永久性編輯，但是 <strong>強烈建議</strong> 您使用一個短語，以實現國際化，並增加網站管理員端的可定製性。</p>
<h3 id="widget">Widget 標籤<a class="headerlink" href="#widget" title="Permanent link">&para;</a></h3>
<p>在頁面中包含小元件，或將小元件添加到小元件的位置上。</p>
<pre><code class="language-html">&lt;xf:widget key=&quot;widget_name&quot; /&gt;
</code></pre>
<p>widget 標籤具有以下屬性：</p>
<ul>
<li><code>key</code> - 小元件的 key，如小元件設定中定義的。</li>
<li><code>position</code> - 如果設定，則改變小元件將被渲染的位置。</li>
<li><code>class</code> - 不要與 HTML 的 class 混淆，這是包含小元件定義的 PHP 類。<ul>
<li><code>title</code> - 當使用 <code>class</code> 屬性時，您可以使用 <code>title</code> 屬性來設置小元件的標題。</li>
<li>當使用<code>class</code>屬性時，你也可以提供小元件特定的選項作為屬性。</li>
</ul>
</li>
</ul>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p><code>class</code> 標籤不能與 <code>key</code> 標籤一起使用。</p>
</div>
<h3 id="useractivity">UserActivity 標籤<a class="headerlink" href="#useractivity" title="Permanent link">&para;</a></h3>
<p>根據用戶上一次操作以及該操作發生的時間來顯示用戶的狀態。</p>
<pre><code class="language-html">&lt;xf:useractivity user=&quot;{$xf.visitor}&quot; /&gt;
</code></pre>
<p>UserActivity 標籤具有以下屬性：</p>
<ul>
<li><code>user</code> - 用戶顯示的狀態。</li>
</ul>
<h4 id="_28">格式<a class="headerlink" href="#_28" title="Permanent link">&para;</a></h4>
<blockquote>
<p>查看頁面 <em>最新案例檔案</em> · 4分鐘前</p>
</blockquote>
<p>格式為 <strong>[活動名稱]</strong>  <strong>· [時間]</strong></p>
<h3 id="userbanners">UserBanners 標籤<a class="headerlink" href="#userbanners" title="Permanent link">&para;</a></h3>
<p>在水平列表中顯示使用者的橫幅。</p>
<pre><code class="language-html">&lt;xf:userbanners user=&quot;{$xf.visitor}&quot; /&gt;
</code></pre>
<p>UserBanners 標籤具有以下屬性：</p>
<ul>
<li><code>user</code> - 顯示該用戶的用戶橫幅。</li>
</ul>
<h4 id="_29">示例<a class="headerlink" href="#_29" title="Permanent link">&para;</a></h4>
<p><img alt="UserBanners 標籤的示例結果。" src="../files/images/example-userbanners-tag.png" /></p>
<p>UserBanners 標籤的示例結果。</p>
<h3 id="userblurb-tag">UserBlurb tag<a class="headerlink" href="#userblurb-tag" title="Permanent link">&para;</a></h3>
<p>顯示用戶個人資料的單行摘要。</p>
<pre><code class="language-html">&lt;xf:userblurb user=&quot;${xf.visitor}&quot; /&gt;
</code></pre>
<p>UserBlurb 標籤具有以下屬性：</p>
<ul>
<li><code>user</code> - 顯示 XenForo 使用者對象的簡介。</li>
</ul>
<h4 id="_30">格式<a class="headerlink" href="#_30" title="Permanent link">&para;</a></h4>
<blockquote>
<p>FBI 顧問 · 43 · 來自美國</p>
</blockquote>
<p>格式為 <strong>[角色 / 自定義標題] · 年齡 · 位置</strong></p>
<h3 id="username">Username 標籤<a class="headerlink" href="#username" title="Permanent link">&para;</a></h3>
<p>Displays the user's username, optionally with a tool-tip.
顯示用戶的用戶名，可選擇使用工具提示。
顯示用戶的用戶名（可選）和工具提示。</p>
<pre><code class="language-html">&lt;xf:username user=&quot;{$xf.visitor.username}&quot; notooltip=&quot;true&quot; /&gt;
</code></pre>
<p>Username 標籤具有以下屬性：</p>
<ul>
<li><code>user</code> - 要顯示其名稱的 XenForo 用戶對象。</li>
<li><code>notooltip</code> - 是否關閉工具提示。</li>
<li><code>href</code> - 點擊用戶名時所導向到的連結。</li>
</ul>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>如果設定了 <code>href</code>，則不會顯示工具提示，因為它不起作用，而且可能會誤導使用者。</p>
</div>
<h3 id="usertitle">UserTitle 標籤<a class="headerlink" href="#usertitle" title="Permanent link">&para;</a></h3>
<p>Displays the user's title.顯示使用者的頭銜。</p>
<pre><code class="language-html">&lt;xf:usertitle user=&quot;{$xf.visitor}&quot; /&gt;
</code></pre>
<p>UserTitle 標籤具有以下屬性：</p>
<ul>
<li><code>user</code> - 此 XenForo 用戶物件，用於顯示用戶頭銜。</li>
</ul>
<h3 id="sectioned">Sectioned 標籤<a class="headerlink" href="#sectioned" title="Permanent link">&para;</a></h3>
<p>Sectioned 標籤全都會呼叫函數 <code>modifySectionedHtml</code>。 它們修改的 HTML 元素就是標籤名稱。因此 <code>sidebar</code> 標籤會修改側邊欄的 HTML 等等。</p>
<h4 id="_31">示例<a class="headerlink" href="#_31" title="Permanent link">&para;</a></h4>
<pre><code class="language-html">&lt;xf:sidebar&gt;
 &lt;h1&gt;我的神奇側邊欄！&lt;/h1&gt;
&lt;/xf:sidebar&gt;
</code></pre>
<h4 id="_32">共同屬性<a class="headerlink" href="#_32" title="Permanent link">&para;</a></h4>
<ul>
<li><code>mode</code> - 修改模式。（請參閱修改模式）</li>
</ul>
<h4 id="_33">修改方式<a class="headerlink" href="#_33" title="Permanent link">&para;</a></h4>
<p>預設情況下，修改方式為 <code>replace</code>。（即，如果沒有指定屬性。）</p>
<ul>
<li><code>prepend</code> - 將標籤的內容放在 HTML 元素的開頭。</li>
<li><code>append</code> - 將標籤的內容放在 HTML 元素的末尾。</li>
<li><code>replace</code> - 用標籤的內容替換 HTML 的元素。</li>
</ul>

            </div>
          </div>
          

<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
  
  <a href="rest-api/" class="btn btn-neutral float-right" title="REST API">下一頁 <span class="icon icon-circle-arrow-right"></span></a>
  
  
  <a href="" class="btn btn-neutral" title="入門須知"><span class="icon icon-circle-arrow-left"></span> 上一頁</a>
  
</div>


<footer>
  <div role="contentinfo">
    <!-- Copyright etc -->
    
    <p><a href="https://xenforo.com/" target="_blank">XenForo 開發者說明文件&trade; &copy; 2017-2018 XenForo Ltd.</a></p>
    
    <p>
      使用 <a href="http://www.mkdocs.org">MkDocs</a> 構建，該文檔基於 <a href="https://readthedocs.org">Read the Docs</a> 提供的 <a href="https://github.com/snide/sphinx_rtd_theme">主題</a>，並由 <a href="https://xenforo.com">XenForo Ltd</a> 修改。
    </p>
  </div>
</footer>
      
        </div>
      </div>

    </section>

  </div>

  <div class="rst-versions" role="note" aria-label="versions">
    <span class="rst-current-version" data-toggle="rst-current-version">
      
          <a href="https://github.com/EverSoar/xenforo2doc/" class="fa fa-github" style="float: left; color: #fcfcfc"> GitHub</a>
      
      
        <span><a href=".." style="color: #fcfcfc;">&laquo; 上一頁</a></span>
      
      
        <span style="margin-left: 15px"><a href="../rest-api/" style="color: #fcfcfc">下一頁 &raquo;</a></span>
      
    </span>
</div>
    <script>var base_url = '..';</script>
    <script src="../js/theme.js" defer></script>
    <script src="../js/lang.js" defer></script>
      <script src="../search/main.js" defer></script>
</body>
</html>
